<template>
  <div class="">
    <el-container>
      <el-header>
        <h1>后台电商管理系统</h1>
        <el-button type="info" @click="quit">退出登录</el-button>
      </el-header>
      <el-container>
        <el-aside :width=" flag==true? '65px' : '200px' ">
          <div class="p11">
             <span class="p1" @click="flag=!flag">|||</span>
          </div>
          <el-menu
            active-text-color="#ffd04b"
            background-color="#545c64"
            class="el-menu-vertical-demo"
            default-active="1"
            text-color="#fff"
            :collapse="flag"
            :collapse-transition="false"
            router
          >
            <el-sub-menu
              :index="index + ''"
              v-for="(item, index) in menus"
              :key="index"
            >
              <template #title>
                <el-icon><component :is="icons[index]" /></el-icon>
                <span>{{item.authName}}</span>
              </template>
              <el-menu-item-group>
                <el-menu-item
                  :index="ele.path"
                  v-for="(ele, val) in item.children"
                  :key="val"
                >
                  <template #title>
                    <el-icon><Tools /></el-icon>
                    <span>{{ ele.authName }}</span>
                  </template>
                </el-menu-item>
              </el-menu-item-group>
            </el-sub-menu>
          </el-menu>
        </el-aside>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup lang='ts'>
import { ref, reactive, toRefs, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import { getMenus } from "../utils/api";
import { ElMessage } from "element-plus";
import {useCounterStore} from '../stores/counter'
import {
  User,
  Tools,
  Goods,
  Notebook,
  Histogram,
} from "@element-plus/icons-vue";

const stores = useCounterStore()
const router = useRouter();
const route = useRoute();
const data = reactive({});
const menus = ref([]);
const flag = ref(false)
const icons = [User, Tools, Goods, Notebook, Histogram];

const quit = () => {
  localStorage.removeItem("token");
  router.push("/login");
};

const getAll = () => {
  getMenus().then((res) => {
    console.log(res);
    if (res.data.meta.status == 200) {
      menus.value = res.data.data;
      let akk = []
      res.data.data.forEach(item=>{
           item.children.forEach(ele=>{
             let newname = ele.path.charAt(0).toUpperCase()+ele.path.substring(1,ele.path.length)
             let shh = {
                path:'/' + ele.path,
                name:newname,
                title:ele.authName
             }
               akk.push(shh)
               stores.setRight(akk)
           })
      })
    }
    
  });
};
onMounted(() => {
  getAll();
});
</script>

<style lang='scss' scoped>
.el-header {
  background-color: #2a4b6a;
  color: #333;
  text-align: center;
  line-height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 80px;
  box-sizing: border-box;
  h1 {
    color: #fff;
  }
}

.el-aside {
  background-color: #545c64;
  color: #333;
  text-align: center;
  height: 90vh;
  
  .p11{
    height: 30px;
    background-color: #898787;
    .p1{
    color: #fff;
    padding: 0;
    cursor: pointer;
    line-height: 30px;
  }
  }
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  height: 90vh;
}
::v-deep .el-menu{
    border-right:0 !important;
}
body > .el-container {
  margin-bottom: 40px;
}
</style>
